import React, { useState } from 'react';
import { Form, Row, Modal } from 'antd';
import HOCSelect from '@/components/AntDesign/Select';
import PropTypes from 'prop-types';

const AllocationModal = props => {
  const { visible, handleOk, handleCancel, serUserOption, formItemLayout } = props;
  const [confirmLoading, setConfirmLoading] = useState(false);
  const [form] = Form.useForm();

  const onFinish = async values => {
    try {
      setConfirmLoading(true);
      await handleOk(values);
    } catch (e) {
      console.error(e);
    } finally {
      setConfirmLoading(false);
    }
  };
  const onOk = async () => {
    form.submit();
  };

  return (
    <Modal
      forceRender
      title="分配"
      visible={visible}
      confirmLoading={confirmLoading}
      onOk={onOk}
      onCancel={handleCancel}
    >
      <Form form={form} onFinish={onFinish}>
        <Row>
          <Form.Item
            name="user"
            rules={[{ required: true, message: '请选择员工服务人员' }]}
            label={<span>员工服务人员</span>}
            {...formItemLayout}
          >
            <HOCSelect placeholder="请选择" labelInValue style={{ width: '80%' }}>
              {serUserOption}
            </HOCSelect>
          </Form.Item>
        </Row>
      </Form>
    </Modal>
  );
};

AllocationModal.propTypes = {
  visible: PropTypes.bool.isRequired,
  handleOk: PropTypes.func.isRequired,
  handleCancel: PropTypes.func.isRequired,
  serUserOption: PropTypes.array.isRequired,
  formItemLayout: PropTypes.object.isRequired,
};

export default AllocationModal;
